<template>
    <modal
        :show='show'
        mode='bottom'
        :maskClose='false'
        closeButton
        @close='closeHandle'>
        <div class="component-sms-code">
            <p class="component-sms-code__text">请输入验证码</p>
            <p class="component-sms-code__text-detail">请输入{{mobile | mobile}}收到的验证码</p>
            <div class="component-sms-code__space">
                <input v-model='number' type="text" class="component-sms-code__input" placeholder="验证码">
                <verification-code class='component-sms-code__code' v-model='sent' @click='getCode'></verification-code>
            </div>
            <p class='component-sms-code__fail'>{{ errorText }}</p>
            <div class="component-sms-code__button">
                <span class='button short' @click='verification'>确认</span>
            </div>
        </div>
    </modal>
</template>

<script>
    import modal from './Modal.vue'
    import loading from './Loading.vue'
    import verificationCode from './VerificationCode.vue'
    import mobile from '../filters/filter-mobile'
    import { reportApi, userApi } from '../api/api'

    export default {
        components:{
            modal,
            loading,
            verificationCode
        },
        filters:{
            mobile
        },
        props: {
            show: {
                type: Boolean,
                required: true,
                default:false
            },
            mobile:{
                type: String,
                default:''
            },
            status: {
                type: String,
                default:''
            },
            type:{
                type: String,
                default:'DEFAULT'
            }
        },
        data() {
            return {
                password:'',
                number:'',
                sent:false,
                errorText:'',
            }
        },
        computed:{

        },
        methods:{
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            closeHandle(){
                this.$emit('close')
            },
            getCode(){
                if(this.sent) return
                this.sent = true

                userApi.sendSms({
                    mobile:this.mobile,
                    type:this.type
                })
                .then(result=>{

                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                })
            },
            payFail(){
                this.status
            },
            verification(){
                if(this.number != ''){
                    this.complete = true
                    this.errorText = ''
                    this.$emit('finish',this.number)
                }
                else{
                    this.errorText = '验证码不能为空'
                }
            }
        },
        watch: {
            'show'(newVal,oldVal){
                if(newVal == true){
                    this.getCode()
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";

    .component-pay-password{

    }
    .component-sms-code__text{
        @extend %font-title;
        color:$importColor;
        text-align: center;
        padding-bottom: 24px;
    }
    .component-sms-code__text-detail{
        @extend %font-body1;
        padding:0 15px 16px 15px; 
    }
    .component-sms-code__space{
        position: relative;
        height: 56px;
        .component-sms-code__input{
            @extend %font-subhead;
            padding:14px 15px;
            width: 100%;
            background-color: $backgroundColor;
            border:1px solid $sectionColor;
            box-sizing: border-box;
        }
        .loading--absolute{
            top:0;
        }
        .component-sms-code__code{
            @extend %font-button;
            position: absolute;
            right:0;
            top:50%;
            transform:translate(0,-50%);
        }
    }
    .component-pay-password__frame{
        display: flex;
        justify-content:center;
        position: absolute;
        top:0;
        left:0;
        right:0;
    }
    .component-pay-password__item{
        width: 40px;
        height: 40px;
        margin-right:8px;
        position: relative;
        background-color: $backgroundColor;
        border: 1px solid $sectionColor;
        box-sizing: border-box;
        i{
            display: none;
            width: 10px;
            height:10px;
            background-color: #000;
            border-radius:50%;
            position: absolute;
            top:50%;
            left:50%;
            margin-top:-5px;
            margin-left:-5px;
        }
        &:last-child{
            margin-right:0px;
        }
        &.active{
            background-color: #fff;
            i{
                display: block;
            }
        }
    }
    .component-sms-code__button{
        display: flex;
        justify-content: flex-end;
    }
    .component-pay-password__success{
        text-align: center;
        position: absolute;
        top:0;
        left:50%;
        margin-left:-25px;
        .iconfont{
            font-size: 50px;
            color:$orange;
        }
    }
    .component-sms-code__fail{
        @extend %font-caption;
        height:36px;
        line-height:36px;
        padding:0px 15px;
        color:$red;
    }

</style>